<template>
  <div class="bgimg">
    <img
      src="https://ts1.cn.mm.bing.net/th/id/R-C.a64aafb9ec85891e7c48aa5f5348a910?rik=BTugH9kC9quG1w&riu=http%3a%2f%2fwww.jinglongkeji.com%2fuploadfiles%2fpictures%2fnews%2f20190805100659_2598.jpg&ehk=v56HaKfH%2fS%2fTctgnElTb57YhYaWY%2fnsh5K2sEUFb0pg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
      alt=""
    >
  </div>
  <div class="form">
    <div class="form-body">
      <div class="explain">
        <div class="t">领养说明</div>
        <div class="p"><el-icon>
            <StarFilled />
          </el-icon> 从汪汪喵呜孤儿院领养狗狗或猫咪不需支付任何费用。</div>
        <div class="p"><el-icon>
            <StarFilled />
          </el-icon> 由于能力有限，我们目前只接受佛山地区的领养申请。如果您的居住地不是佛山，请咨询您周边的领养机构。</div>
        <div class="p"><el-icon>
            <StarFilled />
          </el-icon> 您所填写的信息将只用于领养的评估。</div>
        <div class="p"><el-icon>
            <StarFilled />
          </el-icon> 如果您现在仍是一名学生，请和您的父母或监护人就领养事宜进行充分的沟通。在取得他们的同意后，由您的父母或监护人代为填写领养申请表。</div>
      </div>
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 800px; margin: auto;"
      >
        <el-divider>
          个人信息
        </el-divider>
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.resource">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="form.Email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="常居住在地">
          <el-select
            v-model="form.region"
            placeholder="常居住在地"
          >
            <el-option
              label="广州"
              value="广州"
            />
            <el-option
              label="佛山"
              value="佛山"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="现居住在">
          <span></span>
          <el-select
            v-model="form.region2"
            placeholder="现居住在佛山市"
          >
            <el-option
              label="顺德区"
              value="顺德区"
            />
            <el-option
              label="南海区"
              value="南海区"
            />
            <el-option
              label="高明区"
              value="高明区"
            />
            <el-option
              label="三水区"
              value="三水区"
            />
            <el-option
              label="禅城区"
              value="禅城区"
            />
          </el-select>
        </el-form-item>
        <el-divider>
          家庭情况
        </el-divider>
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="form.marriage">
            <el-radio value="单身">单身</el-radio>
            <el-radio value="已婚">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="您是否了解怀孕期间养宠物的影响">
          <el-radio-group v-model="form.w1">
            <el-radio value="是">是</el-radio>
            <el-radio value="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="如果怀孕期间您的家人反对继续养宠物，您准备如何解决?">
          <el-input
            v-model="form.desc"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="目前和您一起居住的人包括">
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              value="父母"
              name="type"
            >
              父母
            </el-checkbox>
            <el-checkbox
              value="伴侣"
              name="type"
            >
              伴侣
            </el-checkbox>
            <el-checkbox
              value="孩子"
              name="type"
            >
              孩子
            </el-checkbox>
            <el-checkbox
              value="朋友/同学/同事"
              name="type"
            >
              朋友/同学/同事
            </el-checkbox>
            <el-checkbox
              value="合租者"
              name="type"
            >
              合租者
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="您是否和他们沟通过领养事宜?">
          <el-radio-group v-model="form.w2">
            <el-radio value="是">是</el-radio>
            <el-radio value="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="您目前住房的性质">
          <el-radio-group v-model="form.w3">
            <el-radio value="自有住房">自有住房</el-radio>
            <el-radio value="独自租房">独自租房</el-radio>
            <el-radio value="与他人合租">与他人合租</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="住房面积">
          <el-input v-model="form.w4" />
        </el-form-item>
        <el-form-item label="街道/小区名">
          <el-input v-model="form.w5" />
        </el-form-item>
        <el-divider>
          工作情况
        </el-divider>
        <el-form-item label="您目前">
          <el-radio-group v-model="form.w6">
            <el-radio value="工作">工作</el-radio>
            <el-radio value="读书">读书</el-radio>
            <el-radio value="退休">退休</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作（单位）的性质">
          <el-radio-group v-model="form.w7">
            <el-radio value="国企">国企</el-radio>
            <el-radio value="私企">私企</el-radio>
            <el-radio value="政府部门">政府部门</el-radio>
            <el-radio value="自由职业">自由职业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="如果您是自由职业者，请简单说明一下您的工作">
          <el-input v-model="form.w8" />
        </el-form-item>
        <el-form-item label="您是否会经常出差/出游">
          <el-radio-group v-model="form.w9">
            <el-radio value="不会">不会</el-radio>
            <el-radio value="偶尔">偶尔</el-radio>
            <el-radio value="经常">经常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider>
          相关经验
        </el-divider>
        <el-form-item label="您是否养过或正在养动物">
          <el-radio-group v-model="form.w10">
            <el-radio value="曾经养过">曾经养过</el-radio>
            <el-radio value="正在养">正在养</el-radio>
            <el-radio value="从未养过">从未养过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="如果您曾经养过或正在养动物，请描述一下它们的情况">
          <el-input
            v-model="form.w11"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="最近的动物医院距离您家大约">
          <el-radio-group v-model="form.w12">
            <el-radio value="1公里以内">1公里以内</el-radio>
            <el-radio value="2公里以内">2公里以内</el-radio>
            <el-radio value="5公里以内">5公里以内</el-radio>
            <el-radio value="5公里以上">5公里以上</el-radio>
            <el-radio value="还不清楚">还不清楚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="您了解打疫苗的相关事宜吗">
          <el-radio-group v-model="form.w13">
            <el-radio value="了解">了解</el-radio>
            <el-radio value="不了解">不了解</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            class="sub"
          >提交申请</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>

</template>
<script setup>
import { ref } from 'vue'
import { reactive } from 'vue'

const form = reactive({
  name: '',
  age: '',
  resource: '',
  Email: '',
  phone: '',
  region: '',
  region2: '',
  marriage: '',
  w1: '',
  desc: '',
  type: [],
  w2: '',
  w3: '',
  w4: '',
  w5: '',
  w6: '',
  w7: '',
  w8: '',
  w9: '',
  w10: '',
  w11: '',
  w12: '',
  w13: '',
  delivery: false
})

import { useRouter } from 'vue-router'
const router = useRouter() // 提现记录
function onSubmit() {
  alert('提交成功，点击确认跳转到首页')
  router.push({ path: '/' })
}
</script>
<style scoped>
.form {
  width: 100%;
  padding: 10px 15%;
}
.form .form-body {
  padding: 15px;
  box-shadow: 5px 5px 15px #ccc;
}
.form .explain {
  padding: 10px;
  border: 1px solid #ff7f7f;
  background-color: #ff7f7f27;
  border-radius: 5px;
}
.form .explain .t {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 35px;
  color: #c25454;
}
.form .explain .p {
  line-height: 25px;
  color: #c25454;
}
.form .sub {
  margin: 10px auto;
  margin-top: 20px;
  padding: 15px 50px;
  background-color: var(--myc);
  border: 1px solid var(--myc);
}
.form .sub:hover {
  background-color: var(--mych);
}

@media (max-width: 1000px) {
  .form {
    padding: 15px;
  }
}
</style>